Embed Code Examples

• Install the package and import the Pyramid embed client:

import { PyramidEmbedClient } from "@pyramid-embed/embed-js";

• Create an instance of the embed client.
• The constructor accepts your embed site URL.

const embedClient = new PyramidEmbedClient('https://mysite.pyramidanalytics.com');

• Get container for embedding content.
• To embed multiple visuals, add this directive multiple times.

const container = document.getElementById('embed-container');

• Lastly, call embed function and pass the container and the options objects that contains the content item ID.
• This statement can be added multiple times to embed multiple visual, with each contentId corresponding to a container (above).

embedClient.embed(container, { contentId: '62f272fd-7f2e-4862-b88c-286db265ffb4', });

The snippet JavaScript snippet with full HTML includes several directives.

• The first directive defines the character set:

• Next, the meta name and resolution:

• Next, the title for the embed page:

• The script directive imports the embed JavaScript library from your Pyramid installation. It only needs to appear once on the page and should appear at the top of the page:

• Create a DOM element where the embedding content will be placed.
• You can add multiple DIV tags per page for multiple visuals.

• Add the script that initializes the Pyramid embed client and embeds the content.
• Add multiple visuals by adding multiple embed method calls.
• Each container and content id should have a corresponding DIV element (above).

• Install required packages.
• Import Pyramid embed container component.

import React from 'react'; import ReactDOM from 'react-dom'; import { PyramidEmbedContainer } from "@pyramid-embed/embed-react";

• Create embed options object.
• Add multiple options statements to embed multiple visuals.

const options = { contentId: '62f272fd-7f2e-4862-b88c-286db265ffb4', }

• Finally, render the Pyramid embed container component and pass the host and options as properties.
  • The host should be set to your Pyramid environment.
  • Pass the item's contentId in the options object.

ReactDOM.render( , document.getElementById('root') );

• Install @pyramid-embed/embed-angular package.
• Add EmbedAngularModule to main NgModule imports, as indicated by step 2 of the instructions:

import { EmbedAngularModule } from '@pyramid-embed/embed-angular'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, EmbedAngularModule], providers: [], bootstrap: [AppComponent], })

• In your angular component, import EmbedOptions type:

import { Component } from '@angular/core'; import { EmbedOptions } from '@pyramid-embed/embed-angular';

• Create angular component.
• Modify app-root selector if needed.

@Component({ selector: 'app-root', template: `

• Create embed options object.

export class AppComponent { options: EmbedOptions; constructor() { this.options = { contentId: '62f272fd-7f2e-4862-b88c-286db265ffb4', }; } }

Important: This example relates to Embed API 2.0. For information about Embed API 1.0 (the more typical use for Raw JavaScript), see Raw Code Embed.

The Raw JavaScript snippet includes 2 directives:

• The script directive imports the embed JavaScript library from your Pyramid installation. It only needs to appear once on the page and should appear at the top of the page.

• The DIV directive is a 'pre-cooked' embed tag for reading in the targeted item onto the host page. You can add multiple DIV tags per page for multiple visuals.
  • The Embed tag provided here is simply a quick-start example. Developers can generate this tag and its relevant pointers programmatically if they choose to.

The script below shows how to embed code for two data discoveries using JavaScript including full HTML: